<template>
	<view>
		<totalMask :show.sync="isShow" :showType="showType">
			<view class="nvue-flex">
				<view class="avatar-bg">
					<image class="avatar" :src="user.avatar"></image>
				</view>

				<text class="nickname">{{user.nickname}}</text>

				<view class="auth-list">
					<view class="auth-item" @click="noSpeak">
						<text v-if="user.isNoSpeak" class="auth-title">解除禁言</text>
						<text v-else class="auth-title">禁言</text>
					</view>

					<view class="auth-item" @click="kick">
						<text class="auth-title">踢出直播间</text>
					</view>

					<view class="auth-item" @click="black">
						<text class="auth-title">拉黑</text>
					</view>
				</view>

				<view class="lm-bg">
					<view class="lm-item" @click="applyLMData(1)">
						<image class="lm-img" src="@/static/live/info_splm.png"></image>
						<text class="lm-name">视频连麦</text>
					</view>

					<view class="lm-item" @click="applyLMData(2)">
						<image class="lm-img" src="@/static/live/info_yylm.png"></image>
						<text class="lm-name">语音连麦</text>
					</view>
				</view>

				<view class="zw"></view>
			</view>
		</totalMask>
	</view>
</template>

<script>
	import storage from "@/utils/storage";
	import {
		getLiveUserInfo,
		kickUser,
		noSpeakApi,
		allowSpeakApi,
		addBlackApi,
		zbApplyLM
	} from "@/API/newLive.js";
	import st from "@/utils/showtoast.js";
	export default {
		data() {
			return {
				isShow: false,
				showType: 0,

				user: {}
			}
		},
		destroyed() {
			uni.$off("showUserInfo")
		},
		mounted() {
			//只有主播点击用户才可以，用户之间不查看
			uni.$on("showUserInfo", (user_id) => {
				this.getUserInfo(user_id)
			});
		},
		methods: {

			/**
			 * 请求用户信息接口
			 */
			async getUserInfo(user_id) {
				let res = await getLiveUserInfo(storage.getLiveRoomInfo().id, user_id)
				this.user = res.data
				this.showType = 4
				this.isShow = true
			},
			async noSpeak() {
				if (this.user.isNoSpeak == 1) {
					this.allowSpeakData()
				} else {
					this.noSpeakData()
				}
			},
			
			//禁言接口
			noSpeakData() {
				uni.showModal({
					title: '是否禁言？',
					success: res => {
						if (res.confirm) {
							noSpeakApi(storage.getLiveRoomInfo().id, this.user.id).then(res => {
								this.user.isNoSpeak = 1
								st.show('禁言成功')
							})
						}
					}
				})
			},
			//解除禁言
			allowSpeakData() {
				uni.showModal({
					title: '是否解除禁言？',
					success: res => {
						if (res.confirm) {
							allowSpeakApi(storage.getLiveRoomInfo().id, this.user.id).then(res => {
								this.user.isNoSpeak = 0
								st.show("解除禁言成功")
							})
						}
					}
				})
			},
			/**
			 * 踢出直播间
			 */
			async kick() {
				uni.showModal({
					title: '是否踢出？',
					success: res => {
						if (res.confirm) {
							kickUser(storage.getLiveRoomInfo().id, this.user.id).then(res => {
								console.log('---kick', res)
								this.isShow = false
								st.show('踢出成功')
							})
						}
					}
				})
			},
			async black() {
				uni.showModal({
					title: '是否拉黑？',
					success: res => {
						if (res.confirm) {
							addBlackApi(storage.getLiveRoomInfo().id, this.user.id).then(res => {
								st.show('拉黑成功')
							}).catch(err=>{
								console.log('-=-=-=err',err)
							})
						}
					}
				})
			},
			/**
			 * 申请连麦接口
			 */
			async applyLMData(type) {
				let res = await zbApplyLM(storage.getLiveRoomInfo().id, type, this.user.id)
				st.show("申请成功，等待用户确认邀请")
			},
		}
	}
</script>

<style scoped>
	.avatar-bg {
		/* margin-top: -110rpx; */
		width: 150rpx;
		height: 150rpx;
		border: 2px solid #000;
		border-radius: 50%;
		overflow: hidden;
		background-color: #1A191E;
		margin:0 auto;
	}

	.avatar {
		width: 146rpx;
		height: 146rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.nickname {
		margin-top: 28rpx;
		color: white;
		font-size: 30rpx;
	}

	.auth-list {
		margin-top: 50rpx;
		width: 750rpx;
		padding: 0 32rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.auth-item {
		width: 218rpx;
		height: 82rpx;
		background-color: #2A292E;
		border-radius: 41rpx;
		overflow: hidden;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.auth-title {
		color: white;
		font-size: 30rpx;
	}

	.lm-bg {
		margin-top: 40rpx;
		width: 750rpx;
		padding: 0 32rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.lm-item {
		width: 330rpx;
		height: 160rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #2A292E;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.lm-img {
		width: 60rpx;
		height: 60rpx;
	}

	.lm-name {
		margin-top: 10rpx;
		color: white;
		font-size: 30rpx;
	}


	.zw {
		width: 750rpx;
		height: 110rpx;
		overflow: hidden;
	}
</style>